<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/util.js"></script>
</head>
<body>
<div id="app" >
    <p class="pickers" :style="{background:'rgb('+r+','+g+','+b+')'}">
        {{pickers}}
    </p>
    <p>
        r:<input max="255" min="0" type="range" v-model="r"/><input max="255" min="0" v-model="r" type="number">
    </p>
    <p>
        g:<input  max="255" min="0" type="range" v-model="g"/><input max="255" min="0" v-model="g" type="number">
    </p>
    <p>
        b:<input  max="255" min="0" type="range" v-model="b"/><input max="255" min="0" v-model="b" type="number">
    </p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            r: 100,
            g: 200,
            b: 123
        },
        methods:{

        }
    })
</script>
</body>
</html>